<template>
    <div id="show-blogs" >
        <div class="search-box">
            <input type="text" placeholder="请输入搜索内容" v-model="search">
            <button type="button" @click="Search">搜索</button>
        </div>
        <div v-for="blog in blogs" :key="blog" class="single-blog">
            <router-link :to="{ name: 'singlearticle', params: { id: blog.id } }">
                <h2 v-rainbow>{{ blog.title }}</h2>
            </router-link>
            <article>{{ blog.body }}</article>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'show-blog',
    data() {
        return {
            blogs: [],
            search: "",
            blogData: []
        }
    },
    created() {
        axios.get("http://jsonplaceholder.typicode.com/posts")
            .then(data => {
                this.blogs = data.data.slice(0, 10);
                this.blogData = data.data;
            })
    },
    directives: {
        rainbow: {
            mounted(el) {
                el.style.color = "#" + Math.random().toString(16).slice(2, 8);
            }
        }
    },
    methods: {
        Search() {
            // search是v-model="search"的search
            var search = this.search;
            // console.log(search);
            this.blogs = this.blogData.filter(item => {
                // console.log(item);
                if (item.title.indexOf(search) != -1) {
                    return item;
                }
            }).slice(0, 10)
        }
    }
}
</script>

<style scoped>
#show-blogs {
    max-width: 1000px;
    margin: 0 auto;
	margin-top: 20px;
}

.single-blog {
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
}

.search-box {
    width: 210px;
    height: 25px;
    border: 1px solid rgba(238, 238, 238, 6);
    background: #FFFFFF;
	margin-left: 785px;
}

.search-box input {
    border: none;
    outline: none;
}

.search-box button {
    border: none;
    outline: none;
    background: none;
}

.search-box button img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    cursor: pointer;
    padding-top: 2.5px;
}
</style>